import React, { useState } from 'react';
import type { FormProps } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Button, Checkbox, Form, Input } from 'antd';
import sendVerificationCode from '../../components/sendVerificationCodeApi'
import { reset } from '../../api/axios.js';
type FieldType = {
  account?: string;
  password?: string;
  email?: string;
  securityCode?: number;//验证码
};

const Forget: React.FC = () => {
  const [email, setEmail] = useState('');
  const [account, setAccount] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [securityCode, setSecurityCode] = useState('')
  const navigate = useNavigate();
  // const handleClick = () => {
  //   navigate('/login');
  // }

  const handleSendCode = () => {
    sendVerificationCode({ account, email });
  };

  const handleSubmit = async () => {
    try {
      const response = await reset({ account, newPassword,securityCode });

      console.log('密码重置成功', response);
      // 跳转到登录页面
      window.location.href = '/login';
    } catch (err: any) {
      console.log('密码重置失败', err)
    }
  };
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundImage: 'url("/images/login1.jpg")' }}>
      <div
        style={{
          backgroundColor: 'rgba(255, 255, 255, 0.8)', // 设置半透明白色背景
          borderRadius: '30px', // 设置圆角
          padding: '20px', // 添加内边距
          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)', // 添加阴影
        }}
      >
        <Form name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <h1 style={{ fontSize: '1', fontWeight: 'bold' }}>忘记密码</h1>
          </Form.Item>
          <Form.Item<FieldType>
            label="Account"
            name="account"
            rules={[{ required: true, message: 'Please input your username!' },
            { min: 4, max: 20, message: "用户名位6-20位数字或字母" },
            { pattern: new RegExp("^[a-zA-Z0-9_]+$"), message: '' }]}
          >
            <Input value="account" onChange={(e) => setAccount(e.target.value)} />
          </Form.Item>


          <Form.Item<FieldType>
            label="NewPassword"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' },
            { min: 8, max: 16, message: "密码8-16位,且包含大小写字母、数字、特殊字符" },
            { pattern: new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})"), message: " " }]}

          >
            <Input value="newPassword" onChange={(e) => setNewPassword(e.target.value)} />
          </Form.Item>
          <Form.Item<FieldType>
            label="Email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' },
            { pattern: new RegExp("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"), message: "邮箱格式错误" }
            ]}>


            <Input value="email" onChange={(e) => setEmail(e.target.value)} />
          </Form.Item>

          <Form.Item<FieldType>
            label="SecurityCode"
            name="securityCode"
            rules={[{ required: true, message: 'Please input your securityCode!' },
            { len: 6, message: "验证码6位" },]}
          >
            <Input value="securityCode" onChange={(e) => setSecurityCode(e.target.value)} />

          </Form.Item>


          <Form.Item<FieldType>
        
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          ><Button type="primary" onClick={handleSendCode}>发送验证码</Button>
          
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button onClick={handleSubmit} type="primary" htmlType="submit">
              重置
            </Button>

          </Form.Item>
        </Form>
      </div>
    </div>
  );

};

export default Forget;
